<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较大小 computed的实现</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数值1:<input type="number" v-model="num1"><br>
        数值2:<input type="number" v-model="num2"><br>
        比较大小: {{(compareResult)}}
    </div>

    <!-- 


    1.computed 和 watch 如果都能够完成某个功能，优先选择 computed
    2.有一种情况下，必须使用 watch,computed 无法完成
        如果在程序当中采用了异步的方式，只能使用watch
    3.什么时候使用箭头函数？什么时候使用普通函数？
        看看这个函数是否数 Vue管理的
        是Vue管理的函数，统一写普通函数
        不是Vue管理的函数，统一写箭头函数。
     -->

    <script>
        
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '比较大小的案例',
                num1: 0,
                num2: 0,
                /*   computed:{
                      // 计算属性的简写形式
                      compareResult() {
                          let result = this.num1 - this.num2
                              if(result == 0){
                                  return this.num1 + '=' + this.num2
                              }else if(result > 0) {
                                  return this.num1 + '>' + this.num2
                              }else{
                                  return this.num1 + '<' + this.num2
                              }
                      }*/
            },

            computed: {
                // 计算属性的简写形式
                /*   compareResult() {
                      let result = this.num1 - this.num2
                      // 这里采用了异步方式，这里的箭头函数时Javascript引擎去调用，所以最终return的时候，也会将值返回给Javascript引擎
                      setTimeout(()=>{
                          console.log(this)
                          if(result == 0){
                              return this.num1 + '=' + this.num2
                          }else if(result > 0) {
                              return this.num1 + '>' + this.num2
                          }else{
                              return this.num1 + '<' + this.num2
                          }
                      }) 
                      
                  }  */

                  compareResult(){
                    let result = this.num1 - this.num2


                    // 这里虽然是普通函数，但是这个函数并不是Vue管理的，是Window负责调用的。
                    // 所以这个普通函数当中的this是window
                    // 虽然这个函数时普通的函数，但是 this是window
                    setTimeout(function(){
                          console.log(this)
                          if(result == 0){
                              return this.num1 + '=' + this.num2
                          }else if(result > 0) {
                              return this.num1 + '>' + this.num2
                          }else{
                              return this.num1 + '<' + this.num2
                          }
                      }) 
                  }
                }
                       
            
        })
    </script>
</body>

</html>